<%! String pagetitle="Playon"; %>

<html>

  <head>
    <title><%= pagetitle %></title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
      function addSong(name, url) {
        ajaxReq('addSong.jsp?name='+escape(name)+'&url='+escape(url), 'resultAdd');
      }
      function listSongs() {
        ajaxListSongs('listSongs.jsp', 'resultList');
      }
    </script>
  </head>

  <body>

    <!-- tests syntaxe JSP -->
    <h2><font color="#DB1260"><%= pagetitle %></font></h2>
    <%= new String("welcome to playon.<br/>") %>
    <!-- todo : voir try context lookup (diapo 49 de MID sur les EJB) -->

    <!-- ajax addSong -->
    <hr/>
    <form>
      <label>Song name : </label><input type="text" name="songName"/><br/>
      <label>Song url : </label><input type="text" name="songURL"/><br/>
      <input type="button" value="Add" onClick="addSong(this.form.songName.value,this.form.songURL.value);"/>
    </form>
    <span id="resultAdd">Result...</span>

    <!-- ajax listSongs -->
    <hr/>
    List of songs <input type="button" value="List" onClick="listSongs();"/><br/><br/>
    <div id="resultList">Result...</div>

    <!-- ebj create playlist -->
    <hr/>
    <form>
      Create a new playlist :
      <input type="text" name="name"/>
      <input type="button" value="Create" onClick="ajaxReq('createPlaylist.jsp?name','resultCreatePlaylist');"/>
    </form>
    <div id="resultCreatePlaylist">Result...</div>

  </body>

</html>
